gs-listbox {
    display: block;
    position: relative;
    
    height: 100%;
    
    border-left: 1px solid #CCC;
    
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

gs-listbox[letter-scrollbar] {
    padding-right: 1.5em;
}

gs-listbox table tbody tr {
    cursor: pointer;
}

gs-listbox table tbody tr td,
gs-listbox table tbody tr th {
    word-break: break-word;
}

gs-listbox[flex] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
}

gs-listbox[flex] > .root {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    width: 100%;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}


/* #######################################################################
########################## HIDDEN FOCUS CONTROL ##########################
####################################################################### */
gs-listbox > .hidden-focus-control {
    width: 1px;
    height: 1px;
    border: 0 none;
    margin: 0;
    padding: 0;
    
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: -5000;
    opacity: 0.00000001;
    
    -webkit-appearance: none;
    -moz-appearance: none;
}



/* ############################################################## */
/* ########################## DISABLED ########################## */
/* ############################################################## */

gs-listbox[disabled] table {
    background-color: #E5E5E5;
}

gs-listbox[disabled] table tbody tr {
    cursor: default;
}

/* ##################################################### */
/* ############### RECORD HOVER AND DOWN ############### */
/* ##################################################### */

gs-listbox table tbody tr.hover {
    background-color: #F3F3F3;
}

gs-listbox table tbody tr.down {
    background-color: #DADADA;
}


/* #################################################### */
/* ################# SCROLL CONTAINER ################# */
/* #################################################### */

gs-listbox .scroll-container {
    height: 100%;
    
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}


/* #################################################### */
/* ##################### DIVIDERS ##################### */
/* #################################################### */

gs-listbox tr.divider > td {
    font-size: 0.5em;
    color: #FFFFFF;
    
    /* background-color: #168216; */
    background-color: #828282;
    
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.blue gs-listbox tr.divider > td,
gs-listbox.blue tr.divider > td {
    background-color: #3B99BE;
}


/* ################################################### */
/* ############### SCROLLBAR CONTAINER ############### */
/* ################################################### */

gs-listbox > .letter-scrollbar-container {
    position: absolute;
    top: 0;
    right: 0;
    
    width: 1.5em;
    height: 100%;
    
    /* background-color: #E9F1E9; */
    background-color: #E9E9E9;
    /* border-left: 1px solid #168216; */
    border-left: 1px solid #ddd;
    
    text-align: center;
    box-shadow: 0 0 0.25em 0 #AAAAAA;
    
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.blue gs-listbox  > .letter-scrollbar-container,
gs-listbox.blue > .letter-scrollbar-container {
    background-color: #E9EFF7;
    border-color: #3B99BE;
}


/* #################################################### */
/* ##################### SKIPPERS ##################### */
/* #################################################### */

gs-listbox > .letter-scrollbar-container > .skipper {
    /*border-bottom: 1px solid #168216;*/
    
    width: 100%;
    padding: 0 0.2em;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}
gs-listbox > .letter-scrollbar-container > .skipper:last-child {
    border-bottom: 0 none;
}

.blue gs-listbox  > .letter-scrollbar-container > .skipper,
gs-listbox.blue > .letter-scrollbar-container > .skipper {
    border-color: #3B99BE;
}
